import React from 'react';
import {Radio, Tooltip, Icon} from 'antd';
const RadioGroup = Radio.Group;
import {WeaSearchGroup, WeaFormItem, WeaInput, WeaHelpfulTip,WeaLocaleProvider, WeaInputNumber} from 'ecCom';
const getLabel = WeaLocaleProvider.getLabel;
import EType from './base/EType';
import ETitle from './base/ETitle';

// 天气元素
export default class Content_weather extends React.Component {
    state = {
        eCityName: this.props.eCityName,
        eAutoScroll: this.props.eAutoScroll.selected,
        eShowWidth: this.props.eShowWidth
    };

    render() {
        const {eCityName, eAutoScroll, eShowWidth} = this.state;

        let ECityName = <div></div>;
        let EAutoScroll = <div></div>;
        let EShowWidth = <div></div>;
        if (this.props.eShareLevel == '2') {
            ECityName = (
                <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@2mftfs`} label={getLabel(15246, '城市名称')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                    <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@vko25t`} value={eCityName} style={{width: '50%'}} onChange={value => this.setState({eCityName: value})}/>
                    <div style={{padding: '7px 7px', display: 'inline-block'}}>
                        <WeaHelpfulTip ecId={`${this && this.props && this.props.ecId || ''}_WeaHelpfulTip@oubcx6`}
                            width =  {196} //如果要自定义宽度，在这里设置
                            title={getLabel(386599, '请确认服务器可以访问www.weather.com.cn')}
                            isCenter={true}
                        />
                    </div>
                    <div>{getLabel(25899, '多城市名称请用半角逗号分隔（上海,北京）')}</div>
                </WeaFormItem>
            );

            EAutoScroll = (
                <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@ryjuje`} label={getLabel(24548, '自动滚动')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                    <RadioGroup ecId={`${this && this.props && this.props.ecId || ''}_RadioGroup@se2hq8`} size="default" value={eAutoScroll} onChange={e => this.setState({eAutoScroll: e.target.value})}>
                        {
                            this.props.eAutoScroll.options.map((item, index) => {
                                return <Radio ecId={`${this && this.props && this.props.ecId || ''}_Radio@736gu2@${index}`} key={index} value={item.value}>{item.label}</Radio>
                            })
                        }
                    </RadioGroup>
                </WeaFormItem>
            );

            EShowWidth = (
                <WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@lmd6fa`} label={getLabel(24561, '显示宽度')} labelCol={{span: 6}} wrapperCol={{span: 16}}>
                    <WeaInputNumber ecId={`${this && this.props && this.props.ecId || ''}_WeaInputNumber@nrzxvp`} min={0} value={eShowWidth} style={{width: '50%'}} onChange={value => this.setState({eShowWidth: value})}/>
                </WeaFormItem>
            );
        }

        return (
            <div>
                <WeaSearchGroup ecId={`${this && this.props && this.props.ecId || ''}_WeaSearchGroup@w6sat5`} title={getLabel(81711, '基本信息')} needTigger={true} showGroup={true}>
                    <EType ecId={`${this && this.props && this.props.ecId || ''}_EType@r2t67i`} ref="eType" value={this.props.eBaseName}/>
                    {this.props.eShareLevel == '2' ? <ETitle ecId={`${this && this.props && this.props.ecId || ''}_ETitle@y2iyxc`} ref="eTitle" eid={this.props.eid} value={this.props.eTitle} {...this.props}/> : ''}
                    {ECityName}
                    {EAutoScroll}
                    {EShowWidth}
                </WeaSearchGroup>
            </div>
        );
    }

    getSaveValues() {
        return {
            eContentTitle: this.refs['eTitle'] ? this.refs['eTitle'].getSaveValues() : this.props.eTitle,
            eContentCityName: this.state.eCityName,
            eContentAutoScroll: this.state.eAutoScroll,
            eContentShowWidth: this.state.eShowWidth
        };
    }
}